import React from "react";
import { Button, Space, Tag, Image } from "antd";
import { BasicTable } from "@antd/index";
import type { TableProps } from "antd";
import type { UserTable } from "./index.d";
import { addKey } from "@/utils/tools";
export const statusMap: any = {
  0: "禁用",
  1: "启用",
};
export const sexMap: any = {
  0: "男",
  1: "女",
};
const Table = React.memo(
  ({ tableData, handleAction, tablePage, setTablePage }: any) => {
    console.log("Table组件");
    const handleChangeTablePage = ({ current, pageSize }: any) => {
      setTablePage({ ...tablePage, current, pageSize });
    };
    const columns: TableProps<UserTable>["columns"] = [
      {
        title: "序号",
        dataIndex: "index",
        key: "index",
        render: (_text, _record, index) => renderIndex(index, tablePage),
      },
      {
        title: "ID",
        dataIndex: "id",
        key: "id",
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
        render: (text) => {
          const color = text === 0 ? "red" : "green";
          return <Tag color={color}>{statusMap[text]}</Tag>;
        },
      },
      {
        title: "性别",
        dataIndex: "sex",
        key: "sex",
        render: (text) => sexMap[text],
      },
      {
        title: "IP",
        dataIndex: "ip",
        key: "ip",
      },
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "手机号",
        dataIndex: "phone",
        key: "phone",
      },
      {
        title: "微信号",
        dataIndex: "wechat",
        key: "wechat",
      },
      {
        title: "头像",
        dataIndex: "avatar",
        key: "avatar",
        render: (text) => <Image width={50} src={text} />,
      },
      {
        title: "工作",
        dataIndex: "job",
        key: "job",
      },

      {
        title: "老婆",
        dataIndex: "wifeName",
        key: "wifeName",
      },
      {
        title: "儿子",
        dataIndex: "sonName",
        key: "sonName",
      },
      {
        title: "女儿",
        dataIndex: "daughterName",
        key: "daughterName",
      },
      {
        title: "父亲",
        dataIndex: "fatherName",
        key: "fatherName",
      },
      {
        title: "母亲",
        dataIndex: "motherName",
        key: "motherName",
      },
      {
        title: "爷爷",
        dataIndex: "grandpaName",
        key: "grandpaName",
      },
      {
        title: "奶奶",
        dataIndex: "grandmaName",
        key: "grandmaName",
      },
      {
        title: "祖先",
        dataIndex: "ancestorName",
        key: "ancestorName",
      },
      {
        title: "年龄",
        dataIndex: "age",
        key: "age",
      },
      {
        title: "地址",
        dataIndex: "address",
        key: "address",
        render: (_text, _record) => renderToopTip(_text),
      },
      {
        title: "标签",
        dataIndex: "tags",
        key: "tags",
        render: (_text, { tags }) => {
          return (
            <>
              {addKey(tags).map(({ diff_key, diff_value }) => {
                let color = diff_value.length > 5 ? "geekblue" : "green";
                return (
                  <Tag color={color} key={diff_key}>
                    {diff_value}
                  </Tag>
                );
              })}
            </>
          );
        },
      },
      {
        title: "操作",
        key: "action",
        render: (_text, record: any) => {
          return (
            <Space>
              <Button
                type="link"
                onClick={() => handleAction({ type: "update", record })}
              >
                编辑
              </Button>
              <Button
                type="link"
                onClick={() => handleAction({ type: "detail", record })}
              >
                详情
              </Button>
              <Button
                type="link"
                onClick={() => handleAction({ type: "delete", record })}
              >
                删除
              </Button>
              <Button
                type="link"
                onClick={() => handleAction({ type: "disabled", record })}
              >
                {record.status === 0 ? "启用" : "禁用"}
              </Button>
            </Space>
          );
        },
      },
    ];
    return (
      <BasicTable
        columns={columns}
        dataSource={tableData}
        tablePage={tablePage}
        onChange={handleChangeTablePage}
      />
    );
  }
);
export default Table;
